<template>
  <div class="BoxEditing">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="物品类型" prop="region">
        <el-select @change="change" v-model="name">
          <el-option
            v-for="(item,index) in sel"
            :key="item+index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物品名称" prop>
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="market_hash_name" prop="region">
        <el-input v-model="ruleForm.marketHashName"></el-input>
      </el-form-item>
      <el-form-item label="品质" prop="region">
        <el-select @change="change" v-model="name1">
          <el-option
            v-for="(item,index) in sell"
            :key="item+index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片" prop="region">
        <el-upload
          class="avatar-uploader"
          v-bind:action="imgUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          name="file">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="共平台参考价" prop="region">
        <div class="item">
          <div>
            <el-input v-model="ruleForm.priceLowRussia"></el-input>
            <span>元</span>
            <p>俄罗斯</p>
          </div>
          <div>
            <el-input v-model="ruleForm.priceLowC5"></el-input>
            <span>元</span>
            <p>C5</p>
          </div>
          <div>
            <el-input v-model="ruleForm.priceLowIgxe"></el-input>
            <span>元</span>
            <p>IGXE</p>
          </div>
          <el-button type="success">刷新</el-button>
        </div>
      </el-form-item>
      <el-form-item label="本站售价" prop="region">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-if="num=='1'" type="primary" @click="submitForm">修改</el-button>
        <el-button v-else type="primary" @click="addForm" :disabled="bool">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import BasicsApi from "../../../api/Basicpath/index";
import axios from "../../../utils/publicApi.js";
export default {
  data() {
    return {
      imgUpload:`${BasicsApi}/gamemall/upload/image`,
      ruleForm: {
        priceLowC5: 0,
        name: "",
        type: "",
        img: "",
        priceLowIgxe: 0,
        priceLowRussia: 0,
        price: "",
        marketHashName: ""
      },
      name: "",
      name1: "",
      imageUrl: "",
      num: this.$store.state.count,
      sel: "",
      sell: "",
      bool:true
    };
  },
  created() {
    if (this.$store.state.count == "1") {
      this.ruleForm = this.$store.state.dataWhite;
      this.imageUrl = this.ruleForm.img
      axios.getAll("/gamemall/droplist/type").then(res => {
        this.sel = res.obj;
        this.sel.map(item => {
          if (item.id == this.ruleForm.type) {
            this.name = item.name;
          }
        });
      });
      axios.getAll("/gamemall/droplist/quality", { id: 1 }).then(res => {
        this.sell = res.obj;
        this.sell.map(item => {
          if (item.id == this.ruleForm.quality) {
            this.name1 = item.name;
          }
        });
      });
    }else{
      axios.getAll("/gamemall/droplist/quality", { id: 1 }).then(res => {
        this.sell = res.obj;
      });
      axios.getAll("/gamemall/droplist/type").then(res => {
        this.sel = res.obj;
      });
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.img = res.data

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    submitForm() {
      this.changefrom()
      this.$axios.post(`${BasicsApi}/gamemall/open/update`, this.ruleForm).then(res => {
        if(res.code == 200){
              this.$router.push({
                path: "/WhiteList"
              });
                  this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success'
                    });
              }else{
                  this.$message({
                    showClose: true,
                    message: '修改失败',
                    type: 'error'
                    });
              }
      });
    },
    addForm() {
      this.changefrom();
      this.$axios.post(`${BasicsApi}/gamemall/open/insert`, this.ruleForm).then(res => {
        if(res.code == 200){
              this.$router.push({
                path: "/WhiteList"
              });
                  this.$message({
                    showClose: true,
                    message: '新增成功',
                    type: 'success'
                    });
              }else{
                  this.$message({
                    showClose: true,
                    message: '新增失败',
                    type: 'error'
                    });
              }
      });
    },
    change(){
      if(this.name.length!=0 && this.name1.length != 0){
         this.bool = false
      }
    },
    changefrom() {
      this.ruleForm.priceLowC5 = this.ruleForm.priceLowC5 * 1;
      this.ruleForm.priceLowIgxe = this.ruleForm.priceLowIgxe * 1;
      this.ruleForm.priceLowRussia = this.ruleForm.priceLowRussia * 1;
      this.ruleForm.price = this.ruleForm.price * 1;
      this.sel.map(res => {
        if (res.name == this.name) {
          this.ruleForm.type = res.id;
        }
      });
      this.sell.map(res => {
        if (res.name == this.name1) {
          this.ruleForm.quality = res.id;
        }
      });
    }
  }
};
</script>
<style lang="less" >
@import "../../../style/mixin.less";
.el-select-dropdown {
  margin-left: 40px;
}
.BoxEditing {
  .avatar-uploader {
    text-align: left;
    margin-left: 40px;
  }
  .el-form-item__label {
    font-size: 13px !important;
  }
  .w(600);
  input {
    margin-left: 40px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .item {
    text-align: left;
    margin-left: 40px;
    position: relative;
    .el-input {
      .w(100);
      margin-left: 0;
      display: inline-block;
      input {
        margin-left: 0;
      }
    }
    > div {
      display: inline-block;
      text-align: center;
    }
    span {
      margin-right: 50px;
    }
    p {
      .w(100);
    }
  }
  .el-button--success {
    position: absolute;
    right: -96px;
    width: 70px;
  }
}
</style>
